<!--  -->
<template>
    <div class="common north-bound">
        <div class="box border">
            <div class="title">北向资金增持榜</div>
            <div class="query-content">
                <div>
                    <el-select
                        v-model="blockName"
                        size="small" 
                        popper-class="custom-popper-class" 
                        placeholder="请选择板块" 
                        @change="(stockInfo='',selectStockInfo=null, selectChange())">
                        <el-option
                            v-for="(item,i) in blockNameList"
                            :key="i"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                    <!-- <el-input  size="small" clearable style="width: 300px;margin: 0 14px 0 10px" placeholder="请输入股票名称或代码" v-model="stockInfo">
                        <span slot="append" @click.stop="marketCode='',toQuery()">股票搜索</span>
                    </el-input> -->
                    <el-autocomplete
                        v-model="stockInfo"
                        style="width: 310px;margin: 0 14px 0 10px"
                        popper-class="custom-popper-class"
                        size="small"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入板块名称或股票名称代码"
                        @select="handleSelect"
                    >
                        <span slot="append" @click.stop="marketCode='',toQuery()">股票搜索</span>
                    </el-autocomplete>
                    <span @click="toQuery('clear')" class="reset">重置</span>
                </div>
                <div class="date-content">
                    <span>选择日期</span>
                    <el-date-picker
                        v-model="statDate"
                        type="date"
                        size="small"
                        :clearable="false"
                        style="width:150px"
                        value-format="yyyyMMdd"
                        @change="toQuery"
                        :picker-options="pickerOptions"
                        placeholder="">
                    </el-date-picker>
                </div>
            </div>
            <div class="select-tabs">
                <span :class="[marketCode==''?'active':'']" @click="tabsChange('')">全部</span>
                <span :class="[marketCode=='SH'?'active':'']" @click="tabsChange('SH')">沪股通</span>
                <span :class="[marketCode=='SZ'?'active':'']" @click="tabsChange('SZ')">深股通</span>
            </div>
            <div class="table-box-content">
                <div style="min-width: 995px">
                    <table 
                        border="0"
                        bgcolor="#33343B"
                        cellpadding="0"
                        class="head-table"
                    >
                        <thead>
                            <tr>
                                <td width="49px" rowspan="2">序号</td>
                                <td rowspan="2">代码</td>
                                <td rowspan="2">名称</td>
                                <td  class="head-td" colspan="4">今日</td>
                                <td width="339px" class="head-td" colspan="5">占流通股比变动</td>
                                <td class="head-td" rowspan="2" width="100px">所属板块</td>
                            </tr>
                            <tr>
                                <td  @click="tagSort(sortKeys['closePrice'],'closePrice')"
                                >收盘价<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='closePrice'"
                                    ></i></td>
                                <td  @click="tagSort(sortKeys['priceChg'],'priceChg')"
                                >涨跌幅<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='priceChg'"
                                    ></i></td>
                                <td @click="tagSort(sortKeys['hldNum'],'hldNum')"
                                >持股量<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='hldNum'"
                                    ></i></td>
                                <td @click="tagSort(sortKeys['hldVal'],'hldVal')"
                                >持股市值<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='hldVal'"
                                    ></i></td>
                                <td
                                    class="sort"
                                    @click="tagSort(sortKeys['aStkPctChg1'],'aStkPctChg1')"
                                >1日<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='aStkPctChg1'"
                                    ></i>
                                </td>
                                <td class="sort" @click="tagSort(sortKeys['aStkPctChg3'],'aStkPctChg3')">3日<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='aStkPctChg3'"
                                    ></i></td>
                                <td class="sort"  @click="tagSort(sortKeys['aStkPctChg5'],'aStkPctChg5')">5日<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='aStkPctChg5'"
                                    ></i></td>
                                <td class="sort"  @click="tagSort(sortKeys['aStkPctChg10'],'aStkPctChg10')">10日<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='aStkPctChg10'"
                                    ></i></td>
                                <td class="sort"  @click="tagSort(sortKeys['aStkPctChg30'],'aStkPctChg30')">30日<i
                                        :class="['icon',sortDirection]"
                                        v-show="currentSortKey =='aStkPctChg30'"
                                    ></i></td>
                            </tr> 
                        </thead>
                    </table>
                    <div class="table">
                        <table
                            bgcolor="#33343B"
                            cellpadding="0"
                            class="data-table"
                        >
                            <tbody>
                                <tr v-for="(item, i) in tableData" :key="item.id" @dblclick="link(item)">
                                    <td width="49px">{{ i + 1 }}</td>
                                    <td class="orange">{{ item.aStockcode }}</td>
                                    <td class="orange">{{ item.aStocksname }}</td>

                                    <td  :class="[item.priceChg == 0 ? '':item.priceChg > 0 ? 'red':'green']">
                                        {{  fromatData(item.closePrice)}}
                                    </td>
                                    <td  :class="[item.priceChg == 0 ? '':item.priceChg > 0 ? 'red':'green']">
                                        {{ fromatData(item.priceChg, "%") }}
                                    </td>
                                    <td  class="turquoise right">
                                        {{ fromatData(item.hldNum) }}
                                    </td>
                                    <td  class="turquoise right">
                                        {{ fromatData(item.hldVal) }}
                                    </td>

                                    <td width="67px" :class="['right',item.aStkPctChg1 == 0 ? '':item.aStkPctChg1 > 0 ? 'red':'green']">
                                        {{ fromatData(item.aStkPctChg1,'%') }}
                                    </td>
                                    <td width="67px" :class="['right',item.aStkPctChg3 == 0 ? '':item.aStkPctChg3 > 0 ? 'red':'green']">
                                        {{ fromatData(item.aStkPctChg3,'%') }}
                                    </td>
                                    <td width="67px" :class="['right',item.aStkPctChg5 == 0 ? '':item.aStkPctChg5 > 0 ? 'red':'green']">
                                        {{ fromatData(item.aStkPctChg5,'%') }}
                                    </td>
                                    <td width="67px" :class="['right',item.aStkPctChg10 == 0 ? '':item.aStkPctChg10 > 0 ? 'red':'green']">
                                        {{ fromatData(item.aStkPctChg10,'%') }}
                                    </td>
                                    <td width="67px" :class="['right',item.aStkPctChg30 == 0 ? '':item.aStkPctChg30 > 0 ? 'red':'green']">
                                        {{ fromatData(item.aStkPctChg30,'%') }}
                                    </td>
                                    <td class="rightBlue right" width="100px">{{ item.blockName }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <m-page
            @onPage="onPage"
            :pageSize="pageConfig.pageSize"
            :currentPage="pageConfig.currentPage"
            :total="pageConfig.total"
        ></m-page>
    </div>
</template>

<script>
import mPage from "./mPage";
import { numberFormat } from "../script/utils";
import dayjs from 'dayjs'

import {getNorthBoundList,getNorthBoundTimeList,getblockNameList,getblockStockList} from "../api/index";
export default {
    data() {
        return {
            pageConfig: {
                pageSize: 23,
                currentPage: 1,
                total: 10,
            },
            marketCode: '',
            blockName:'',
            statDate: "",
            stockInfo:'',
            selectStockInfo: null,
            timeout: null,
            blockNameList:[],
            timeList:[],
            tableData:[],
            totalSize: 400,
            sortDirection: 'desc', //    降序 desc  升序 asc
            sortFild:0, // 排序字段默认0 ， 0：1日    1:3三日  2：五日    3 :十日  4 :30日
            currentSortKey:'aStkPctChg1',
            sortKeys:{
                aStkPctChg1: 0,
                aStkPctChg3: 1,
                aStkPctChg5: 2,
                aStkPctChg10: 3,
                aStkPctChg30: 4,
                hldNum:5,
                hldVal:6,
                closePrice:7,
                priceChg:8
            },
            pickerOptions:{
                disabledDate:this.isDisabled
            }
           
        };
    },
    components: { "m-page": mPage },
    created() {
        this.getNorthBoundTimeList();
        this.getblockNameList();
    },
    methods: {
        isDisabled(time){
           return time.getTime() > Date.now() || !this.timeList.includes(Number(dayjs(time).format('YYYYMMDD')));
        },
        // 获取北向资金时间列表
        getNorthBoundTimeList(){
            getNorthBoundTimeList().then(res=>{
                this.timeList= res.data||[];
                this.statDate = String(this.timeList[0]);
                this.pageConfig.currentPage = 1;
                this.$forceUpdate();
                this.getNorthBoundList();
            })
        },
        // 获取行业名称列表
        getblockNameList(){
            getblockNameList().then(res=>{
                this.blockNameList= res.data||[];
                
            })
        },
        // 输入框自动搜索
        querySearchAsync(string,cb){
            if(!string){
                cb([]);
                return;
            }
            clearTimeout(this.timeout);
            this.selectStockInfo = null;
            this.timeout = setTimeout(() => {
                getblockStockList(string).then(res=>{
                    let arr = [];
                    for(let val of res.data.block){
                        val.type = 2
                    }
                    arr.push(...res.data.block,...res.data.stocks);
                    for(let item of arr){
                        item.value = item.stockName;
                    }
                    console.log(arr)
                    cb(arr)
                })
            }, 100);
            
        },
        // 输入框自动搜索 选择
        handleSelect(data){
            this.selectStockInfo = data;
        },
        toQuery(type){
            this.pageConfig.currentPage = 1;
            if(type =='clear'){
                this.stockInfo = '';
                this.blockName = '';
                this.selectStockInfo = null;
            }
            this.getNorthBoundList();
        },
        // 获取北向资金列表
        getNorthBoundList(){
            let param = {
                currentPage: this.pageConfig.currentPage,
                pageSize: this.pageConfig.pageSize,
                marketCode: this.marketCode,
                statDate: this.statDate,
                blockName:this.blockName,
                stockInfo: this.selectStockInfo ? this.selectStockInfo.type == 2
                    ? this.selectStockInfo.stockName
                    : this.selectStockInfo.stockCode.substr(0,6)
                    : this.stockInfo,
                stockType: this.selectStockInfo ? this.selectStockInfo.type == 2? 2: 1: 1,
                sortDirection: this.sortDirection,
                sortFild: this.sortFild,
                // totalSize: this.marketCode ? 200 : 400
            }
            getNorthBoundList(param).then(res=>{
                this.tableData = res.data&&res.data.records||[];
                let total = res.data.total || 0
                if (this.marketCode) {
                    total > 200 ? total = 200 : '';
                }else{
                    total > 400 ? total = 400 : ''
                }
                this.pageConfig.total = total;
            })
        },
        // 行业名称变化
        selectChange(val){
            this.pageConfig.currentPage = 1;
            this.getNorthBoundList();
        },
        // 单选变化
        tabsChange(type){
            this.pageConfig.currentPage = 1;
            this.marketCode = type;
            this.getNorthBoundList();
        },
        fromatData(num, unit) {
            if (unit && typeof num == "number" && num != 0) {
                return  num.toFixed(2) + unit;
            } else if (unit && num == null) {
                return "--";
            } else if(unit &&num == 0){
                return Number(num).toFixed(2) + unit;
            }
            if (num == null) return "--";
            return numberFormat(num);
        },
        // 排序
        tagSort(val, key) {
            this.sortFild = val;
            this.currentSortKey = key;
            this.sortDirection=='asc'?this.sortDirection ='desc': this.sortDirection='asc';
            this.getNorthBoundList();
        },
        onPage(p){
            this.pageConfig.currentPage = p;
            this.getNorthBoundList();
        },
        //跳转个股详情
        link(item) {
            // SH 上证  SZ深证
            let type = item.marketCode == "SZ" ? "0" : "1";
            window.prompt(
                "",
                `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${item.aStockcode}","type":"首页"}]`
            );
        },
        back() {
            this.$router.push({ name: "index" });
        },
    },
};
</script>
<style lang="scss">
.el-select-dropdown.el-popper.custom-popper-class, .el-autocomplete-suggestion.el-popper.custom-popper-class{
        border: 1px solid #25262a;
        background-color: #25262a;
        margin-top: 0;
        
        .el-select-dropdown__item{
            color:#f2faff;
            &.selected{
                background: #1d212c;
            }
        }
        .popper__arrow{
            display: none;
        }
        li {
            color: #fff;
        }
        li:hover, .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
            background-color: #2d3246;
        }
    }
</style>
<style lang="scss">
.north-bound{
    
    .query-content{
        padding: 5px 10px;
        .el-input--small .el-input__inner {
            height: 35px;
            line-height: 35px;
            background: #090910;
            border-color: #434448;
            color: #BCBFC4;
        }
        .el-date-editor.el-input{
            .el-input__inner {
                background: #27282E;
                border-color: #434448;
                color: #fff;
                border-top-left-radius: inherit;
                border-bottom-left-radius: inherit;
                border-left: none;
                width: 150px;
            }
            .el-input__prefix{
                .el-input__icon.el-icon-date{
                    line-height: 35px;
                }
            }
        }
        .el-input{
            .el-input-group__append {
                background: linear-gradient(0deg, #343845, #4E596D);
                border: 1px solid #434448;
                color: #fff;
            }
        }
        .el-select.el-select--small{
            .el-input.el-input--small{
                .el-input__inner{
                    background: linear-gradient(0deg, #343845, #4E596D);
                    border: 1px solid #434448;
                    height: 35px;
                    line-height: 35px;
                    color: #fff;
                    font-size: 15px;
                    width: 185px;
                    &::-webkit-input-placeholder { /* Edge */
                        color:#fff;
                    }
                    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                        color:#fff;
                    }
                    &::-moz-placeholder { 
                        color:#fff;
                    }
                    &:-moz-placeholder { 
                        color:#fff;
                    }
                    &::placeholder {
                        color:#fff;
                    }
                }
            }
            
        }
    }
}
</style>
<style lang="scss" scoped>
@import "../style/var.scss";
.border {
    border: 2px solid $color;
    border-radius: 6px;
}
.common {
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    .box {
        height: calc(100% - 65px);
         width: 100%;
        ::-webkit-scrollbar {
            width: 0px;
        }
       .table-box-content{
           height: calc(100% - 116px);
            width: 100%;
            overflow-y: auto;
       }
        .table {
            height: calc(100% - 65px);
            //min-width: 995px;
            overflow: auto;
            scrollbar-width: none; // 火狐上下滚动条消失
            .data-table{
                td{
                    background: #090910;
                    box-sizing: border-box;
                    padding:0 5px;
                    white-space: nowrap;
                }
                tr:hover{
                    td{
                        background: #2D3245;
                    }
                }
            }
        }
        .title {
            height: 34px;
            line-height: 34px;
            background: $color;
            text-align: center;
            color: #ffffff;
            font-size: 16px;
        }
        table {
            // min-width: 995px;
            width: 100%;
            text-align: center;
            line-height: 30px;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 1px;
            thead {
                background: $color;
                td {
                    //border: 1px solid #090910;
                    font-size: 15px;
                    color: #bcbfc4;
                    background: #232429;
                    &.sort {
                        cursor: pointer;
                    }
                    .icon {
                        display: inline-block;
                        width: 7px;
                        height: 9px;
                        margin-left: 5px;
                        &.desc {
                            background: url($PIC_URL + "/tlbypcWeb/support/grid_arrow.png")
                                no-repeat center;
                        }
                        &.asc {
                            background: url($PIC_URL + "/tlbypcWeb/support/grid_2.png")
                                no-repeat center;
                        }
                    }
                }
            }
            tbody {
                tr {
                    &:hover {
                        background: #2d3245;
                    }
                    td {
                        font-size: 16px;
                        color: #bcbfc4;
                        &.orange {
                            color: #f4f636;
                        }
                        &.turquoise {
                            color: #02e2f4;
                        }
                        &.green {
                            color: #61c869;
                        }
                        &.red {
                            color: #ea2827;
                        }
                        &.rightBlue{
                            color: #8CB4F7;
                        }
                        &.right{
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
}
.north-bound{
    .query-content{
        background: #1C1D21;
        margin: 1px 1px 0;
        display: flex;
        justify-content: space-between;
        .reset{
            color:#8CB4F7;
            font-size: 15px;
            cursor: pointer;
            
        }
        .date-content{
            display: flex;
            align-items: center;
            & > span{
                color: #fff;
                display: inline-block;
                font-size: 15px;
                height: 35px;
                line-height: 35px;
                box-sizing: border-box;
                border: 1px solid #434448;
                border-right: none;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                padding: 0 15px;
                color: #BCBFC4;
            }
        }
    }
    .select-tabs{
        font-size: 15px;
        color: #BCBFC4;
        background: #1C1D21;
        margin: 1px 1px 1px;
        box-sizing: border-box;
        span{
            display: inline-block;
            padding: 9px 28px;
            font-size: 15px;
            font-weight: 400;
            color: #BCBFC4;
            line-height: 15px;
            border-right: 1px solid #090910;
            cursor: pointer;
            &.active{
                color: #fff;
                background: #35497C;
            }
        }
    }
}
</style>
